<template>

	<view class="box">

		<u-navbar title-color="#FFFFFF" :is-back="false" title="YouMagic" :background="background">

		</u-navbar>

		<view class="wrap">
			<u-swiper border-radius="20rpx" height="427" :list="list"></u-swiper>
		</view>
		<view @click="goScan" class="nav">
			<image class="img" src="https://file.roumeiji.com/img/10.png" mode=""></image>
			<view>
				<view class="tit1">柔美新生 正品验真 </view>
				<view class="tit2">点击验真</view>
			</view>
		</view>
		<view class="desc">
			<image class="img" src="https://file.roumeiji.com/img/1.jpg" mode="widthFix"></image>
			<image class="img" src="https://file.roumeiji.com/img/2.jpg" mode="widthFix"></image>
			<image class="img" src="https://file.roumeiji.com/img/3.jpg" mode="widthFix"></image>
			<image :show-menu-by-longpress="true" class="img" src="https://file.roumeiji.com/img/4.jpg" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#252525',
				},
				list: [{
						image: 'https://file.roumeiji.com/img/6.png'
					},
					{
						image: 'https://file.roumeiji.com/img/7.png'
					},
					{
						image: 'https://file.roumeiji.com/img/8.png'
					}
				],
			}
		},
		methods:{
		   goScan(){
			   this.$emit('changeTab',1)
		   }
		}
	}
</script>

<style scoped lang="scss">
	image{
		display: block;
	}
	.box {
		padding: 0 26rpx;
	}

	.wrap {
		padding: 14rpx 0;
	}

	.nav {
		display: flex;
		align-items: center;
		width: 697rpx;
		height: 151.6rpx;
		background: url('https://file.roumeiji.com/img/9.png') no-repeat;
		background-size: cover !important;
		margin-bottom: 14rpx;

		.img {
			width: 52rpx;
			height: 64rpx;
			margin: 47rpx 29rpx 41rpx 64rpx;
		}

		.tit1 {
			height: 28rpx;
			line-height: 1;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-bottom: 21rpx;
		}

		.tit2 {

			height: 21rpx;
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 1;
		}
	}

	.desc {
		image {
			width: 100%;
		}
	}
</style>
